﻿<!DOCTYPE html>
<html lang="zh">

<head resource>
    <meta charset="utf-8">
    <include file="../inc/meta.inc" />
    <include file="inc/head.inc" />
    <title>章节</title>
</head>

<body>
    <div id="vapp" v-cloak>
        <div class="toolsbar" v-show="!loading">
            <btngroup show="新增" ref='btngroup' @add="addBtn()" width="800" idkey='Ol_ID' height="600"></btngroup>
            <query_panel :loading="loading">
                <el-form-item label="">
                    <el-tag type="success">
                        <icon>&#xe750</icon>当前课程有 {{total}} 个章节
                    </el-tag>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="filterText" clearable style="width:160px" placeholder="搜索"
                        suffix-icon="el-icon-search"></el-input>
                </el-form-item>
            </query_panel>
        </div>

        <div class="tree-box">
            <el-tree :data="datas" node-key="Ol_ID" ref="tree" :props="defaultProps" expand-on-click-node
                default-expand-all :filter-node-method="filterNode" @node-drag-end="handleDragEnd"
                :expand-on-click-node="false" draggable @node-expand="nodeexpand" @node-collapse="nodecollapse"
                :default-expanded-keys="expanded" v-loading="loading || loading_sumbit">
                <span class="custom-node" slot-scope="{ node, data }">

                    <div class="node_name draghandle">
                        <span>{{data.serial}}</span>
                        <span v-html="showsearch(data.Ol_Name,filterText)" class="large"></span>
                        <span class="date"
                            :title="data.Ol_ModifyTime|date('yyyy-MM-dd HH:mm:ss')">({{data.Ol_ModifyTime.untilnow()}})</span>
                    </div>
                    <div class="btns">
                        <span class="column_video">
                            <el-tag @click="btnVideoModify(data)" :type="data.Ol_IsVideo ? 'success' : 'info'">
                                <icon>&#xe83a</icon>视频
                            </el-tag>
                            <el-tag @click="()=>{$refs['live'].setvalue(data);}"
                                :type="data.Ol_IsLive ? 'success' : 'info'">
                                <icon>&#xe6bf</icon> 直播
                            </el-tag>
                            <el-tag @click="()=>{$refs['accessory'].setvalue(data);}"
                                :type="data.Ol_IsAccessory ? 'success' : 'info'" title="附件">
                                <icon>&#xe853</icon> 附件
                            </el-tag>
                        </span>

                        <span class="column_state">
                            <template v-if="loadingid!=data.Ol_ID">
                                <el-link :type="data.Ol_IsUse ? 'success' : 'danger'"
                                    @click="changeState(data,'Ol_IsUse')">
                                    <icon v-if="data.Ol_IsUse" title="启用">&#xe634</icon>
                                    <icon v-else title="禁用">&#xe7ad</icon>
                                </el-link>
                                <el-link :type="data.Ol_IsFinish ? 'success' : 'danger'"
                                    @click="changeState(data,'Ol_IsFinish')">
                                    <icon v-if="data.Ol_IsFinish" title="完结">&#xe634</icon>
                                    <icon v-else title="未完">&#xe85c</icon>
                                </el-link>
                                <el-link :type="data.Ol_IsFree ? 'success' : 'warning'"
                                    @click="changeState(data,'Ol_IsFree')">
                                    <icon v-if="data.Ol_IsFree" title="免费">&#xe740</icon>
                                    <icon v-else title="收费">&#xe818</icon>
                                </el-link>
                            </template>
                        </span>
                        <span class="column_btn">
                            <loading v-if="loadingid==data.Ol_ID" star></loading>
                            <template v-else>
                                <el-link type="primary" @click="modifyBtn(data)">
                                    <icon>&#xa02e</icon>编辑
                                </el-link>
                                <el-popconfirm title="确定删除吗？" @confirm="remove(node, data)">
                                    <el-link type="danger" slot="reference">
                                        <icon>&#xe800</icon>删除
                                    </el-link>
                                </el-popconfirm>
                            </template>
                        </span>
                    </div>
                </span>
            </el-tree>
        </div>
        <!--新增或编辑-->
        <div v-show="modify_show">
            <el-dialog :title="modify_obj.Ol_ID ? '编辑章节' : '新增章节'" :visible="true" :show-close="true" :modal="false"
                :close-on-click-modal="false" class="modify_show" :before-close="()=>modify_show=false">
                <el-form :model="modify_obj" ref="modify_obj" label-width="80px"
                    :rules="{'Ol_Name':[ { required: true, message: '不得为空', trigger: 'blur' }]}">
                    <el-form-item label="章节名称" prop="Ol_Name">
                        <el-input v-model="modify_obj.Ol_Name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上级章节" prop="Ol_PID" v-if="modify_obj.state=='add'">
                        <el-cascader style="width: 300px;" ref="outlines" v-model="olSelects" :options="datas"
                            @change="casader_change" separator="／"
                            :props="{children: 'children', label: 'Ol_Name',value: 'Ol_ID', expandTrigger: 'hover',checkStrictly: true }"
                            clearable filterable placeholder=" -- 章节 -- ">
                            <template slot-scope="{node,data}">
                                {{data.Ol_Name}}
                            </template>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="状态">
                        <div>
                            <el-checkbox v-model="modify_obj.Ol_IsUse">启用</el-checkbox>
                            <el-checkbox v-model="modify_obj.Ol_IsFinish">完结</el-checkbox>
                            <help>编辑完成</help>
                            <el-checkbox v-model="modify_obj.Ol_IsFree">免费</el-checkbox>
                            <help>课程允许试学时，可以试学免费章节</help>
                        </div>
                        <div>
                            <el-checkbox v-model="modify_obj.Ol_IsLive">当前章节为直播课</el-checkbox>
                        </div>
                    </el-form-item>
                    <template v-if="modify_obj.Ol_IsLive">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="直播时间">
                                    <el-date-picker v-model="modify_obj.Ol_LiveTime" type="datetime" placeholder="开始时间">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="直播时长">
                                    <el-input type="number" v-model="modify_obj.Ol_LiveSpan" style="width: 220px;">
                                        <template slot="append">分钟</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </template>
                    <el-form-item label="" label-width="0px" prop="Ol_Intro">
                        <editor :content="modify_obj.Ol_Intro" :menubar="false" model="general" ref="intro_editor"
                            upload="Outline" :dataid="modify_obj.Ol_ID" style="height: 500px;"
                            @change="text=>modify_obj.Ol_Intro=text"></editor>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="()=>{$confirm('确认关闭？').then(()=> { modify_show = false;})}">取 消</el-button>
                    <el-button type="primary" @click="btnModify('modify_obj')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--章节直播的设置-->
        <accessory ref="accessory" remark="章节附件的管理" @success="getTreeData"></accessory>
        <outline_live ref="live" remark="章节直播的管理" @save="()=>{getTreeData()}"></outline_live>
    </div>


</body>

</html>